<style>
body {
	width: 400px;

/*
	background-color: #999;
	color: black;
*/
}

h1, h2 {
	font-size: 16px;
	font-family: sans-serif;
	font-weight: bold;
}

.panel {
	display: block;

	border-radius: 8px;
	padding: 16px;

	border: 1px solid #ccc;
}

.panel h2 {
	font-size: 14px;
}

#content-password, #content-website, #content-config {
	display: none;
}

.tabs {
}

.tabs .tab {
	border-radius: 8px 8px 0 0;
	padding: 4px;
	text-align: center;
	font-family: sans-serif;

	background-color: #ccc;

	border: 1px solid #999;

	float: left;

	cursor: pointer;
}

.tabs .tab.active {
	font-weight: bold;
	background-color: #ccccff;
}
</style>
<script src="js/popup.js"></script>


<body>
<h1>F-Pass</h1>

<div class="tabs">
	<div class="tab active" id="tab1" onclick="tab_password()">Master Password</div>
	<div class="tab" onclick="tab_websites()">Websites</div>
	<div class="tab">Config</div>
</div>
<div style="clear: both"></div>

<div class="panel" id="content-password">
	<div id="old-pwd">
		<div class="descr">To change the <strong>Master Password</strong> please provide the<br />
		<em>old</em> Master Password: 
		<input type="password" id="old-master-pwd" />
		</div>
	</div>
	<table border="0">
	<tr><td align="right">Master password:</td><td><input type="password" id="new-master1" /></td></tr>
	<tr><td align="right">Master password (confirm):</td><td><input type="password" id="new-master2" /></td></tr>
	<tr><td colspan="2" align="center"><button onclick="set_new_master_pwd()">Set Master Password</button></td></tr>
	</table>
</div>

<div class="panel" id="content-websites">
	<div class="scrollable" id="websites-table">
		
	</div>
</div>
<div class="panel" id="content-config"></div>

</body>
